<template>
	<view v-if="isFinish">
		<!-- 轮播图及商品名称 -->
		<view class="wrap head-wrap">
			<carousel :image="detail.images" />
			<pointPriceTag :point="detail.score" :price="detail.original_price" :cost="detail.price"
				:sell="detail.sales" />
			<view class="title__container">
				<view class="name__message">{{detail.goods_name}}</view>
				<view class="sub_name__message">{{detail.goods_subname}}</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="wrap spec-wrap flex-x">
			<view class="spec__list item12-2">规格</view>
			<view class="flex-x right item12-10" @tap="specToast = true">
				<view class="item5-4 spec">请选择规格</view>
				<view class="item5-1 spec__icon"><i class="iconfont iconright"></i></view>
			</view>
		</view>

		<!-- 服务 -->
		<view class="wrap spec-wrap flex-x">
			<view class="spec__list item12-2">服务</view>
			<view class="flex-x right item12-10" @tap="serverToast = true">
				<view class="item5-4 flex-x">
					<view class="server__set flex-x">
						<view class="server__set-item flex-x" v-for="(item,index) in detail.services" :key="index">
							<image :src="item.path"></image><text>{{item.services_name}}</text>
						</view>
					</view>
				</view>
				<view class="item5-1 spec__icon"><i class="iconfont iconright"></i></view>
			</view>
		</view>

		<!-- 商品详情选项卡 -->
		<view class="wrap bottom_wrap flex-x center item-3">
			<view @tap="changeWindows(0)" class="flex-y center">
				<view>商品详情</view>
				<view :class="(0 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(1)" class="flex-y center">
				<view>规格参数</view>
				<view :class="(1 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(2)" class="flex-y center">
				<view>用户评价<span>(6)</span></view>
				<view :class="(2 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
		</view>

		<!-- 选项卡内容 -->
		<view class="wrap wrap__detail">
			<!-- 商品详情 -->
			<view v-show="(0 == this.currentWindows)" class="goods_detail">

			</view>
			<!-- 规格参数 -->
			<view v-show="(1 == this.currentWindows)" class="goods_spec flex-x center">
				<msTable :element="detail.spec" />
			</view>
			<!-- 用户评价 -->
			<view v-show="(2 == this.currentWindows)" class="goods__comment">
				<view v-for="(item,index) in detail.comment" :key="index">
					<comments :head="item.path" :name="item.member_name" :comment="item.comment"
						:time="item.create_time" :level="item.star" :images="item.images" />
				</view>
				<view class="btn-cancelData">
					<view class="btn-hollow" @tap="allComment">查看全部</view>
				</view>
			</view>
		</view>

		<!-- 服务弹窗 -->
		<toast v-show="serverToast" @event="serverToast = false">
			<view class="__toast__server">
				<view class="toast-title">服务保障</view>
				<scroll-view scroll-y="true">
					<view class="server__option flex-x top" v-for="(item,index) in detail.services" :key="index">
						<view class="__option_icon">
							<image :src="item.path"></image>
						</view>
						<view class="__option_content">
							<view class="title__option">{{item.services_name}}</view>
							<view class="remark__option">{{item.services_desc}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="saveBtn">确认</view>
			</view>
		</toast>

		<!-- 规格弹窗 -->
		<toast height="75" v-show="specToast" @tap="specToast = false">
			<view class="__toast__spec">
				<view class="__toast__head flex-x top">
					<view class="item12-3">
						<image :src="detail.images[0].path" mode="aspectFill" />
					</view>
					<view class="__toast__info flex-y item12-8">
						<view class="toast_name">{{detail.goods_name}}</view>
						<view class="toast_price">{{detailPrice}}</view>
					</view>
					<view class="space_close item12-1" @tap.stop="specToast = false"><i class="iconfont iconcha"></i>
					</view>
				</view>

				<scroll-view scroll-y="true">
					<view class="__toast__spec_option">
						<specOption v-for="(item ,index) in detail.spec" :key="index" :optionKey="index"
							v-model="optionId[index]" :spec="item.spec_name" :items="item.detail"
							@event="optionChange" />
					</view>
					<view class="__toast__spec_option">
						<view class="flex-x __toast__number">
							<view class="item12-6 __number_title">购买数量</view>
							<view class="item12-6 __number_option flex-x right">
								<view @tap.stop="numberOption(false)" class="__number_option_btn subtract">-</view>
								<view class="__set_number">{{number}}</view>
								<view @tap.stop="numberOption(true)" class="__number_option_btn plus">+</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="saveBtn" :style="{'background':isAll? '#E6B873':'#CDCDCD'}" @tap.stop="makeOrder">确认</view>
			</view>
		</toast>

		<!-- 底部栏 -->
		<bottomGroup>
			<view class="flex-x center bottom__btn">
				<view @tap="specToast = true" class="bg__blue">立即兑换</view>
			</view>
		</bottomGroup>
	</view>
</template>

<script>
	import carousel from "@/components/goodsMsg/carousel.vue";
	import comments from "@/components/goodsMsg/comments.vue";
	import msTable from "@/components/goodsMsg/table.vue";
	import toast from "@/components/goodsMsg/toast.vue";
	import specOption from "@/components/goodsMsg/specOption.vue";
	import coupon from "@/components/discount-coupon/discount-coupon.vue";
	import bottomGroup from "@/components/goodsMsg/bottom/bottomHome.vue"
	import pointPriceTag from "@/components/goodsMsg/priceTag/point.vue"
	export default {
		components: {
			comments,
			msTable,
			toast,
			coupon,
			carousel,
			specOption,
			bottomGroup,
			pointPriceTag
		},
		data() {
			return {
				detail: {}, //详情
				isFinish: false, //是否拿到数据详情
				specToast: false, //是否查看商品规格
				serverToast: false, //是否查看商品服务
				goodId: '', //商品ID
				number: 1, //选择商品数量
				optionId: [], //选择商品规格
				currentWindows: 0, //商品详情选项卡索引
				isAll: false, //商品规格全选
				detailPrice: '请选择规格', //选择商品价格
				DesPrice: '', //选择商品规格详情
			}
		},
		onLoad(e) {
			this.goodId = JSON.parse(e.data).id;
			this.getDetail();
		},
		methods: {
			// 获取商品详情
			getDetail: function() {
				this.$shopApi.apiPost('font/goods/info/' + this.goodId, {
					unid: this.goodId
				}).then(res => {
					if (res.data.code == 200) {
						this.detail = res.data.data.goods;
						this.detail.images = this.util.getImages(this.detail.images);
						this.detail.activites_spec_price[0].unid = this.detail.spec[0].detail[0].unid;
						this.detail.spec.forEach((item, index) => {
							this.optionId.push({
								unid: ''
							});
						})
						console.log(this.detail);
						this.isFinish = true;
					} else {
						this.util.showDialog(res.data.message);
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			// 切换商品详情选项卡索引
			changeWindows: function(key) {
				this.currentWindows = key
			},
			// 确认购买商品
			makeOrder: function() {
				this.specToast = false;
				//点击直接购买
				this.$interface.routeLink({
					route: 'confirmOrder',
					data: {
						type: 'point',
						goods: [{
							id: this.goodId,
							number: this.number,
							price: this.DesPrice,
							goods_name: this.detail.goods_name,
							goods_subname: this.detail.goods_subname
						}]
					}
				})
			},
			// 选择商品规格
			optionChange: function(id, key) {
				this.optionId[key]['unid'] = id;
				this.isAll = true;
				// 判断如果有一个类型没有选规格，那么将不能购买商品
				this.optionId.forEach((item, index) => {
					if (!item.unid) {
						this.isAll = false;
					}
				})
				if (this.isAll) {
					var arr = [];
					this.optionId.forEach((item, index) => {
						arr[index] = item.unid;
					})
					//选择商品后排序ID组合，小的在前，大的在后
					arr = arr.sort();
					this.DesPrice = this.util.spec(arr, this.detail,'point'); //获取当前价格详情
					if (this.DesPrice != undefined) {
						this.detailPrice = this.DesPrice.score+'积分 + ￥'+ this.DesPrice.cost;
					}
				}
			},
			// 商品数量加&减
			numberOption: function(is_plus) {
				this.number = this.number + (is_plus ? 1 : -1)
				this.number = this.number <= 0 ? 1 : this.number
			},
			// 跳转到全部评论
			allComment: function() {
				
			}
		}
	}
</script>

<style>
	@import url("./style/common-detail.css");

	.bg__blue {
		padding: 12rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		width: 100%;
		background-color: #3790F4;
	}

	.btn-cancelData {
		display: inline-block;
		margin: 40rpx auto;
		width: 100%;
	}

	.btn-hollow {
		margin: auto;
	}
</style>
